<div class="container">
  <div class="row">
    <div class="col">
      <mat-card appearance="outlined" class="mb-3">
        <mat-card-content>
          <div class="d-flex my-3">
            <div class="w-50" i18n>Version</div>
            <div class="w-50">
              <gf-value [value]="version" />
            </div>
          </div>
          <div class="d-flex my-3">
            <div class="w-50" i18n>User Count</div>
            <div class="w-50">
              <gf-value [locale]="user?.settings?.locale" [value]="userCount" />
            </div>
          </div>
          <div class="d-flex my-3">
            <div class="w-50" i18n>Activity Count</div>
            <div class="w-50">
              <gf-value
                [locale]="user?.settings?.locale"
                [value]="transactionCount"
              />
              @if (transactionCount && userCount) {
                <div>
                  {{ transactionCount / userCount | number: '1.2-2' }}
                  <span i18n>per User</span>
                </div>
              }
            </div>
          </div>
          <div class="d-flex my-3">
            <div class="w-50" i18n>User Signup</div>
            <div class="w-50">
              <mat-slide-toggle
                color="primary"
                hideIcon="true"
                [checked]="
                  info.globalPermissions.includes(permissions.createUserAccount)
                "
                (change)="onEnableUserSignupModeChange($event)"
              />
            </div>
          </div>
          @if (hasPermissionToToggleReadOnlyMode) {
            <div class="d-flex my-3">
              <div class="w-50" i18n>Read-only Mode</div>
              <div class="w-50">
                <mat-slide-toggle
                  color="primary"
                  hideIcon="true"
                  [checked]="info?.isReadOnlyMode"
                  (change)="onReadOnlyModeChange($event)"
                />
              </div>
            </div>
          }
          <div class="d-flex my-3">
            <div class="w-50" i18n>Data Gathering</div>
            <div class="w-50">
              <mat-slide-toggle
                color="primary"
                hideIcon="true"
                [checked]="isDataGatheringEnabled"
                (change)="onEnableDataGatheringChange($event)"
              />
            </div>
          </div>
          @if (hasPermissionForSystemMessage) {
            <div class="d-flex my-3">
              <div class="w-50" i18n>System Message</div>
              <div class="w-50">
                @if (systemMessage) {
                  <div class="align-items-center d-flex">
                    <div class="text-truncate">{{ systemMessage | json }}</div>
                    <button
                      class="h-100 mx-1 no-min-width px-2"
                      mat-button
                      (click)="onDeleteSystemMessage()"
                    >
                      <ion-icon name="trash-outline" />
                    </button>
                  </div>
                }
                @if (!info?.systemMessage) {
                  <button
                    class="mt-2"
                    color="accent"
                    mat-flat-button
                    (click)="onSetSystemMessage()"
                  >
                    <ion-icon class="mr-1" name="information-circle-outline" />
                    <span i18n>Set Message</span>
                  </button>
                }
              </div>
            </div>
          }
          @if (hasPermissionForSubscription) {
            <div class="d-flex my-3 subscription">
              <div class="w-50" i18n>Coupons</div>
              <div class="w-50">
                <table>
                  @for (coupon of coupons; track coupon) {
                    <tr>
                      <td class="text-monospace">{{ coupon.code }}</td>
                      <td class="pl-2 text-right">
                        {{ formatStringValue(coupon.duration) }}
                      </td>
                      <td>
                        <button
                          class="mx-1 no-min-width px-2"
                          mat-button
                          [matMenuTriggerFor]="couponActionsMenu"
                          (click)="$event.stopPropagation()"
                        >
                          <ion-icon name="ellipsis-horizontal" />
                        </button>
                        <mat-menu
                          #couponActionsMenu="matMenu"
                          class="h-100 mx-1 no-min-width px-2"
                          xPosition="before"
                        >
                          <button
                            mat-menu-item
                            (click)="onDeleteCoupon(coupon.code)"
                          >
                            <span class="align-items-center d-flex">
                              <ion-icon class="mr-2" name="trash-outline" />
                              <span i18n>Delete</span>
                            </span>
                          </button>
                        </mat-menu>
                      </td>
                    </tr>
                  }
                </table>
                <div class="mt-2">
                  <form #couponForm="ngForm" class="align-items-center d-flex">
                    <mat-form-field
                      appearance="outline"
                      class="mr-2 without-hint"
                    >
                      <mat-select
                        name="duration"
                        [value]="couponDuration"
                        (selectionChange)="onChangeCouponDuration($event.value)"
                      >
                        <mat-option value="7 days">{{
                          formatStringValue('7 days')
                        }}</mat-option>
                        <mat-option value="14 days">{{
                          formatStringValue('14 days')
                        }}</mat-option>
                        <mat-option value="30 days">{{
                          formatStringValue('30 days')
                        }}</mat-option>
                        <mat-option value="90 days">{{
                          formatStringValue('90 days')
                        }}</mat-option>
                        <mat-option value="180 days">{{
                          formatStringValue('180 days')
                        }}</mat-option>
                        <mat-option value="1 year">{{
                          formatStringValue('1 year')
                        }}</mat-option>
                      </mat-select>
                    </mat-form-field>
                    <button
                      class="mt-1"
                      color="primary"
                      mat-flat-button
                      (click)="onAddCoupon()"
                    >
                      <span i18n>Add</span>
                    </button>
                  </form>
                </div>
              </div>
            </div>
          }
          <div class="d-flex my-3">
            <div class="w-50" i18n>Housekeeping</div>
            <div class="w-50">
              <div class="align-items-start d-flex flex-column">
                @if (hasPermissionToSyncDemoUserAccount) {
                  <button
                    class="mb-2"
                    color="accent"
                    mat-flat-button
                    (click)="onSyncDemoUserAccount()"
                  >
                    <ion-icon class="mr-1" name="sync-outline" />
                    <span i18n>Sync Demo User Account</span>
                  </button>
                }
                <button color="warn" mat-flat-button (click)="onFlushCache()">
                  <ion-icon class="mr-1" name="close-circle-outline" />
                  <span i18n>Flush Cache</span>
                </button>
              </div>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>
